webpack配置学习二-开发环境和打包环境执行不同打包

分开配置的原因

前端项目的开发在开发过程中和上线时需要的依赖是不同的，所以要求使用webpack打包的时候要能够在两种情况下执行不同的配置。带来的好处是上线的项目不依赖开发下的包，减少生产环境中所需要请求的依赖从而提升页面的性能。

常见的做法

使用不同的配置文件

在项目的中创建两个配置文件，分别对应的开发环境和生产环境。因为两个配置文件有很多共通的基础配置，可以通过引入公共配置的方法减少重复的配置代码。例如，创建名为webpack.base.config.js的文件，该文件中写入共通的基础配置代码。分别创建名为webpack.dev.config.js和webpack.prod.config.js，分别对应开发时和上线时的配置文件。在这两个文件头部引入webpack.base.config.js，根据需求在基本配置的基础上添加各自个性化的配置需求。

在package.json中的scripts属性中配置开发打包命令和上线打包命令，指定不同的配置文件。例如{"scripts":{"build":"webpack --config webpack.prod.config.js","dev":"webpack --config webpack.dev.config.js"}}。这样就可以实现了不同的配置文件对开发和生产两种环境下个性化打包需求。

完成这些工作之后就可以在命令行中通过npm run build和npm run dev来执行package中配置的脚本了。

使用环境变量参数

当开发环境和生产环境依赖的包差别不太大的时候，为了简单还可以将所有的配置写在一个配置文件之中，通过读取参数的方式输出不同的配置对象。
方法是首先配置基本的配置项，然后判断当前是否处于开发状态下，如果是开发状态往配置项里面添加配置。例如配置对象是config，如果当前是开发状态，需要添加plugin。则config.plugin.push(new webpackHtmlPlugin())。

传参的方式

判断的方式是在package.json中脚本加上环境变量NODE_ENV，例如
{"scripts":{"build":"NODE_ENV=production webpack --config webpack.config.js","dev":"NODE_ENV=deveploment webpack --config webpack.config.js"}}

读参的方式

const isDev = process.env.NODE_ENV === 'development'